<script setup>

import {computed, onMounted, reactive, ref} from "vue";
import instance from "../instance";

onMounted(() => {
  //  向服务器请求所有用户信息
  findStudent()
  findClasses()
})

//页面和容量
const page = ref(1)
const pageSize = ref(10)
const total = ref(0);
//容器
const tableData = ref([])
const tableDataClass = ref([])
const classesName = ref([])

const handleSizeChange = (val) => {
  pageSize.value = val
  findStudent()
}
const handleCurrentChange = (val) => {
  page.value = val
  findStudent()
}

const updataClasses = () => {
  for (let i = 0; i < tableDataClass.value.length; i++) {
    const data = {
      value: tableDataClass.value[i].id,
      label: tableDataClass.value[i].name,
    }
    classesName.value.push(data)
  }
}


const findClasses = () => {
  instance.get('/classes?page=1&pageSize=99')
      .then(res => {
        tableDataClass.value = res.data.data.rows
        updataClasses()
      })
}

//条件查询
const findStudent = () => {
  let url = '/student?page=' + page.value + '&pageSize=' + pageSize.value
  if (formInline.name !== '') {
    url = url + "&name=" + formInline.name
  }
  if (formInline.studentNumber !== '') {
    url = url + "&studentNumber=" + formInline.studentNumber
  }
  if (formInline.highestDegree !== '') {
    url = url + "&highestDegree=" + formInline.highestDegree
  }
  if (formInline.classesId !== '') {
    url = url + "&classesId=" + formInline.classesId
  }
  instance.get(url)
      .then(function (res) {
        // 处理成功情况
        tableData.value = res.data.data.rows;
        total.value = res.data.data.total
      })
      .catch(function (error) {
        // 处理错误情况
        console.log(error);
      })
}

const dialogVisible = ref(false)
const deleteId = ref('')
// 根据id删除信息
const removeById = (id) => {
  deleteId.value = ''  //重置数据
  dialogVisible.value = true
  deleteId.value = id
}


const removeByIdOk = () => {
  //发起删除请求
  instance.delete('/student/' + deleteId.value)
      .then(res => {
        if (res.data.code === 0) {
          ElMessage.error(res.data.msg)
        } else {
          ElMessage({
            message: res.data.msg,
            type: 'success',
          })
          findStudent() //删除成功后重新查询
        }

      })
      .catch(error => {
        console.error('删除失败：', error);
      });
  dialogVisible.value = false
}


// 添加表单
const addForm = ref({
      name: "",
      studentNumber: "",
      gender: "",
      phone: "",
      highestDegree: "",
      classesId: "",
    }
)

//添加学生信息操作
const dialogVisibleAdd = ref(false)
const addStudent = () => {
  addForm.value = {
    name: "",
    studentNumber: "",
    gender: "",
    phone: "",
    highestDegree: "",
    classesId: "",
  }
  dialogVisibleAdd.value = true
}
const addStudentOk = () => {
  const student = addForm.value
  if (student.name === "" || student.studentNumber === "" || student.gender === "" || student.phone === "" || student.highestDegree === "" || student.classesId === "") {
    ElMessage({
      message: '还有信息没填',
      type: 'warning',
    })
  } else {
    instance.post('/student', student)
        .then(res => {
          if (res.data.code === 0) {
            ElMessage.error(res.data.msg)
          } else {
            findStudent()
            ElMessage({
              message: '添加成功',
              type: 'success',
            })
            dialogVisibleAdd.value = false
          }
        })
        .catch(error => {
          console.error('添加失败：', error);
        });

  }
}

//修改信息操作
const dialogVisibleUpdate = ref(false)
// 修改表单
const updateForm = ref({
      id: "",
      name: "",
      studentNumber: "",
      gender: "",
      phone: "",
      highestDegree: "",
      classesId: "",
    }
)
const updateById = (id) => {
  instance.get('/student/' + id)
      .then(res => {
        updateForm.value = {
          id: res.data.data.id,
          name: res.data.data.name,
          studentNumber: res.data.data.studentNumber,
          gender: res.data.data.gender + "",
          phone: res.data.data.phone,
          highestDegree: res.data.data.highestDegree,
          classesId: res.data.data.classesId,
        }
        dialogVisibleUpdate.value = true
      })
}
const updateByIdOk = () => {
  instance.put('/student', student)
      .then(res => {
        if (res.data.code === 0) {
          ElMessage.error(res.data.msg)
        } else {
          findStudent()
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
          dialogVisibleUpdate.value = false
        }
      })
      .catch(error => {
        console.error('修改失败：', error);
      });
}

const deductionsFormVisible = ref(false)
const num = ref(0)
const stuDeductions = ref({
  id: "",
  disciplineScore: "",
})
const handleChange = (value) => {
  num.value = value
}
//违规扣分
const deductions = (id1) => {
  num.value=0
  stuDeductions.value = {
    id: "",
    disciplineScore: "",
  }
  deductionsFormVisible.value = true
  stuDeductions.value.id = id1
}
const deductionsOk = () => {
  stuDeductions.value.disciplineScore = num.value
  instance.put('/student/deductions', stuDeductions.value).then(res => {
    if (res.data.code === 0) {
      ElMessage.error(res.data.msg)
    } else {
      findStudent()
      ElMessage({
        message: '扣分成功',
        type: 'success',
      })
      deductionsFormVisible.value = false
    }
  })
      .catch(error => {
        console.error('失败：', error);
      });

}

const formInline = reactive({
  name: '',
  studentNumber: '',
  highestDegree: '',
  classesId: '',
})

const onSubmit = () => {
  findStudent()
}
const onClean = () => {
  window.location.reload();
}

//时间格式化
const removeT = (value) => {
  return value.replace('T', ' ').slice(0, -1);
}

//按钮颜色
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
</script>

<template>

  <!--  查询表单  -->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="formInline.name" placeholder="请输入学员姓名" clearable/>
    </el-form-item>
    <el-form-item label="学号">
      <el-input v-model="formInline.studentNumber" placeholder="请输入学号" clearable/>
    </el-form-item>

    <el-form-item label="最高学历">
      <el-select
          style="width: 200px"
          v-model="formInline.highestDegree"
          placeholder="请选择"
          clearable
      >
        <el-option label="初中" value="1"/>
        <el-option label="高中" value="2"/>
        <el-option label="大专" value="3"/>
        <el-option label="本科" value="4"/>
        <el-option label="硕士" value="5"/>
        <el-option label="博士" value="6"/>
      </el-select>
    </el-form-item>
    <el-form-item label="所属班级">
      <el-select
          style="width: 200px"
          v-model="formInline.classesId"
          placeholder="请选择"
          clearable
      >
        <el-option
            v-for="(item, index) in classesName"
            :key="index"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </el-form-item>
    <br>
    <el-button type="primary" @click="onClean">清除</el-button>
    <el-button type="primary" @click="onSubmit">查询</el-button>
    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <el-button type="primary" @click="addStudent">添加学生信息</el-button>
  </el-form>
  <br>
  <br>

  <!-- 展示的表格-->
  <el-table :data="tableData" style="width: 100%" max-height="500">
    <el-table-column fixed label="序号" width="60">
      <template #default="scope">
        {{ scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column fixed prop="name" label="姓名" width="120"/>
    <el-table-column prop="studentNumber" label="学号" width="120"/>
    <el-table-column prop="classesName" label="班级" width="160"/>
    <el-table-column prop="gender" label="性别" width="60">
      <template #default="scope">
        <span v-if="scope.row.gender==1">男</span>
        <span v-if="scope.row.gender==2">女</span>
      </template>
    </el-table-column>
    <el-table-column prop="phone" label="手机号" width="160"/>
    <el-table-column prop="highestDegree" label="最高学历" width="120">
      <template #default="scope">
        <span v-if="scope.row.highestDegree==1">初中</span>
        <span v-if="scope.row.highestDegree==2">高中</span>
        <span v-if="scope.row.highestDegree==3">大专</span>
        <span v-if="scope.row.highestDegree==4">本科</span>
        <span v-if="scope.row.highestDegree==5">硕士</span>
        <span v-if="scope.row.highestDegree==6">博士</span>
      </template>
    </el-table-column>
    <el-table-column prop="disciplineTimes" label="违纪次数" width="120"/>
    <el-table-column prop="disciplineScore" label="违纪扣分" width="120"/>
    <el-table-column prop="updateTime" label="最后操作时间" width="190">
      <template #default="scope">
        {{ removeT(scope.row.updateTime) }}
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="150">
      <template #default="scope">
        <el-button type="primary" :icon="Edit" circle @click="updateById(scope.row.id)"/>
        <el-button type="primary" :icon="Edit" circle @click="deductions(scope.row.id)"/>
        <el-button type="danger" :icon="Delete" circle @click="removeById(scope.row.id)"/>
      </template>
    </el-table-column>
  </el-table>
  <hr>
  <!--    分页   -->
  <div class="demo-pagination-block">
    <el-pagination
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20, 40]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>


  <!-- 删除提示对话框  -->
  <el-dialog
      v-model="dialogVisible"
      title="删除学生"
      width="30%"
  >
    <span>是否要删除此学生</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消删除</el-button>
        <el-button :plain="true" type="primary" @click="removeByIdOk()">
          确认删除
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 增加表单   -->
  <el-dialog v-model="dialogVisibleAdd" title="添加学员">
    <el-form :model="addForm">
      <el-form-item label="姓名">
        <el-input v-model="addForm.name" placeholder="请输入姓名"/>
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="addForm.studentNumber" placeholder="请输入学号"/>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="addForm.gender" placeholder="请选择性别" style="width: 200px">
          <el-option label="男" value="1"/>
          <el-option label="女" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="addForm.phone" placeholder="请输入手机号"/>
      </el-form-item>
      <el-form-item label="最高学历">
        <el-select
            style="width: 200px"
            v-model="addForm.highestDegree"
            placeholder="请选择"
            clearable
        >
          <el-option label="初中" value="1"/>
          <el-option label="高中" value="2"/>
          <el-option label="大专" value="3"/>
          <el-option label="本科" value="4"/>
          <el-option label="硕士" value="5"/>
          <el-option label="博士" value="6"/>
        </el-select>
      </el-form-item>
      <el-form-item label="所属班级">
        <el-select
            style="width: 200px"
            v-model="addForm.classesId"
            placeholder="请选择"
            clearable
        >
          <el-option
              v-for="(item, index) in classesName"
              :key="index"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisibleAdd = false">取消</el-button>
        <el-button :plain="true" type="primary" @click="addStudentOk()">
           保存
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 修改表单   -->
  <el-dialog v-model="dialogVisibleUpdate" title="修改学员">
    <el-form :model="updateForm">
      <el-form-item label="姓名">
        <el-input v-model="updateForm.name" placeholder="请输入姓名"/>
      </el-form-item>
      <el-form-item label="学号">
        <el-input v-model="updateForm.studentNumber" placeholder="请输入学号"/>
      </el-form-item>
      <el-form-item label="性别">
        <el-select
            style="width: 200px"
            v-model="updateForm.gender"
            placeholder="请选择"
            clearable
        >
          <el-option label="男" value="1"/>
          <el-option label="女" value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="updateForm.phone" placeholder="请输入手机号"/>
      </el-form-item>
      <el-form-item label="最高学历">
        <el-select
            style="width: 200px"
            v-model="updateForm.highestDegree"
            placeholder="请选择"
            clearable
        >
          <el-option label="初中" value="1"/>
          <el-option label="高中" value="2"/>
          <el-option label="大专" value="3"/>
          <el-option label="本科" value="4"/>
          <el-option label="硕士" value="5"/>
          <el-option label="博士" value="6"/>
        </el-select>
      </el-form-item>
      <el-form-item label="所属班级">
        <el-select
            style="width: 200px"
            v-model="updateForm.classesId"
            placeholder="请选择"
            clearable
        >
          <el-option
              v-for="(item, index) in classesName"
              :key="index"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisibleUpdate = false">取消</el-button>
        <el-button :plain="true" type="primary" @click="updateByIdOk()">
           保存
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 违纪扣费 -->
  <el-dialog v-model="deductionsFormVisible" title="学员违纪处理">
    <el-form>
      <el-input-number v-model="num" :min="1" :max="10" @change="handleChange"/>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deductionsFormVisible = false">取消</el-button>
        <el-button type="primary" @click="deductionsOk()">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

</template>


<style scoped>

</style>